module-js

ModuleJS

ModuleJS is a library that allows you standardize each module on your web site or web app. A module can essentially be anything, but it usually represents an independent component on your website or app. (like a modal, or a carousel for example).

The idea behind this library is to provide a common interface between all the modules you may want to use on your site. Which all means less code, less work, and less things to unit test.

Usage

The Module class an abstract class so using it by itself is not really helpful. The best way to make something a module is to extend the Module class. To do this, you simply use it's extend method. From there, you can override the default abstract methods to add logic that is custom to your module. Here is an example of how to create a Modal class that extends the module class and has custom loading functionality.

var Modal = Module.extend({
   onLoad: function () {
       the module's load() method is called! so let's do stuff here...
   }
});

Each module that you have on your site/app will generally be tied to an HTML/DOM element on the page. So when creating a new class that extends the Module class, you can then create instances of it that accept an HTMLElement. For our example, we'll use an element that represents our modal container (assuming there is already an element in the DOM with the id of "modal-container").

 // create a new instance
 var modalInstance = new Modal({
     el: document.getElementById('modal-container')
 });

Once your instance is created, you can call built-in methods on it. For instance, calling load() on our Modal instance will trigger our onLoad() function we created above.

 // load the module
 modalInstance.load();

Methods

When you extend the Module class, your module will get some useful methods whenever an instance of it is created. These methods can all also be asynchronous, just as long as you return a promise. The methods include the following:

load()

Your module instance will have a .load() method when it is created. When called it will call your onLoad() function. For instance, below you can see how a Carousel class can be created that loads some assets asynchronously when the load() method is called.

var Carousel = Module.extend({
   onLoad: function () {
       // code that loads carousel assets asynchronously here
       // and return a promise when done
   }
});
var carousel = new Carousel();

// trigger carousel load
carousel.load();

show()

The show() method can be called when you want to set your module to its "active" state.

var Carousel = Module.extend({
   onLoad: function () {
       // code that loads carousel assets asynchronously here
       // and return a promise when done
   }
});
var carousel = new Carousel();

// trigger carousel load
carousel.load();

hide()

The hide() method can be called when you want to set your module to its "inactive" state.

disable()

The disable() method can be called when you want to set your module to a state in which it can no longer be interacted with.

enable()

The enable() method can be called when you want to begin allowing a user to interact with your module.

error()

The error() method can be called when you want to manually trigger an error in your module.